<template>
  <div class="base-panels">
    <h2 class="title2">竣工验收备案信息 </h2>
    <table class="show-table">
      <colgroup>
        <col width="136">
        <col width="275">
        <col width="136">
        <col width="275">
      </colgroup>
      <tr>
        <td class="key">竣工验收备案编号</td>
        <td colspan="3">{{ detail?.finishCode }}</td>
      </tr>
      <tr>
        <td class="key">实际造价（万元）</td>
        <td>{{detail?.realSpend}}</td>
        <td class="key">实际面积/长度（㎡/m）</td>
        <td>{{detail?.realArea}}</td>
      </tr>


      <tr>
        <td class="key">实际开工日期</td>
        <td>{{ parseTime(detail?.realStart)}} </td>
        <td class="key">实际竣工日期</td>
        <td>{{ parseTime(detail?.realEnd)}}</td>
      </tr>


      <tr>
        <td class="key">跨度（米）</td>
        <td>{{detail?.span}} </td>
        <td class="key">结构体系</td>
        <td>{{detail?.structure}}</td>
      </tr>

      <tr>
        <td class="key">建设规模</td>
        <td colspan="3">{{detail?.scale}}</td>
      </tr>

      <tr>
        <td class="key">备案机关</td>
        <td>{{ detail?.filingAuthority }} </td>
        <td class="key">备案日期</td>
        <td>{{ parseTime(detail?.filingDate)}}</td>
      </tr>


    </table>
  </div>

</template>

<script lang="ts">
interface BaseModel {
  filingAuthority?:string;//	备案机关	string
  filingDate?:string;//	备案日期	string(date-time)
  finishCode?:string;//	竣工验收备案编号	string
  finishId?:string;//	id	string
  length?:number;//	长度	number(double)
  realArea?:number;//	建筑面积/长度	number(double)
  realEnd?:string;//	实际竣工日期	string(date-time)
  realSpend?:number;//	实际造价	number(double)
  realStart?:string;//	实际开工日期	string(date-time)
  scale?:string;//	建设规模	string
  span?:number;//	跨度	number(double)
  structure?:string;//	结构体系
}

import {defineComponent, inject, onMounted, ref} from 'vue';
import { parseTime } from '/@/utils';
import { getSingleFinishApi } from "/@/api/single";
export default defineComponent({

  setup() {

    const singleId = inject('singleId') as string;
    const detail = ref<BaseModel>({});
    const init = async() => {
      let { data , success } = await getSingleFinishApi({singleId});
      success ? detail.value=data : console.log ('接口返回错误')

    }
    onMounted(init);
    return {
      parseTime , detail
    }
  },
})
</script>

<style lang="less" scoped>
.base-panels{
  padding: 0 20px 50px;
}

.title2{
  padding: 20px 0 5px;
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 350px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/src/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
